<template>
  <div>
    <el-input
      class="input-new-tag"
      v-show="inputVisible"
      v-model.trim="inputValue"
      ref="saveTagInput"
      size="small"
      @keyup.enter.native="handleInputConfirm"
      @blur="handleInputConfirm"
    >
    </el-input>
    <el-button v-show="!inputVisible" class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVisible: false,
      inputValue: ''
    }
  },
  methods: {
    handleInputConfirm() {
      this.inputVisible = false
      this.$emit('inputConfirm', this.inputValue)
      this.inputValue = ''
    },
    showInput() {
      this.inputVisible = true
      console.log(this.$refs.saveTagInput.$refs.input.parentNode.style.display, 'display1111')

      // 当需要拿到最新的dom结构进行操作时，需要使用$nextTick
      this.$nextTick(() => {
        console.log(this.$refs.saveTagInput.$refs.input.parentNode.style.display, 'display2222')
        this.$refs.saveTagInput.$refs.input.focus()
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
